<template>
  <div class="workflow-node" :class="nodeClass">
    <!-- 节点标题 -->
    <div class="node-header">
      <div class="node-title">{{ data.class_type }}</div>
      <div class="node-actions">
        <el-button-group>
          <el-button 
            size="small" 
            type="primary" 
            circle
            @click="$emit('edit', data)"
          >
            <el-icon><Edit /></el-icon>
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 节点内容 -->
    <div class="node-content">
      <!-- 输入参数 -->
      <div class="node-inputs">
        <div 
          v-for="(value, key) in data.inputs" 
          :key="`input-${key}`"
          class="node-param"
        >
          <div class="param-handle input-handle" :data-handleid="`input-${key}`">
            <div class="handle-dot"></div>
          </div>
          <div class="param-label">{{ formatLabel(key) }}</div>
          <div class="param-value">{{ formatValue(value) }}</div>
        </div>
      </div>

      <!-- 输出参数 -->
      <div class="node-outputs">
        <div 
          v-for="(value, key) in data.outputs" 
          :key="`output-${key}`"
          class="node-param"
        >
          <div class="param-label">{{ formatLabel(key) }}</div>
          <div class="param-value">{{ formatValue(value) }}</div>
          <div class="param-handle output-handle" :data-handleid="`output-${key}`">
            <div class="handle-dot"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 预览图 -->
    <div v-if="data.preview" class="node-preview">
      <el-image 
        :src="data.preview" 
        fit="contain"
        :preview-src-list="[data.preview]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import type { NodeProps } from '@vue-flow/core'

const props = defineProps<NodeProps>()

// 节点类名
const nodeClass = computed(() => ({
  'is-selected': props.selected,
  [`node-type-${props.data.class_type?.toLowerCase()}`]: true
}))

// 格式化标签
const formatLabel = (key: string) => {
  return key
    .split('_')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(' ')
}

// 格式化值
const formatValue = (value: any) => {
  if (value === null || value === undefined) return '-'
  if (typeof value === 'boolean') return value ? '是' : '否'
  if (typeof value === 'number') return value.toString()
  if (typeof value === 'object') return '...'
  return value
}
</script>

<style scoped lang="scss">
.workflow-node {
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  min-width: 200px;
  padding: 8px;
  position: relative;

  &.is-selected {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }

  .node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #333;
    border-radius: 4px;
    margin-bottom: 8px;

    .node-title {
      font-weight: bold;
      font-size: 14px;
    }
  }

  .node-content {
    padding: 0 8px;
  }

  .node-param {
    display: flex;
    align-items: center;
    margin: 8px 0;
    font-size: 12px;

    .param-label {
      flex: 1;
      padding: 0 8px;
      color: #bbb;
    }

    .param-value {
      color: #fff;
      background: #444;
      padding: 2px 6px;
      border-radius: 4px;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .param-handle {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      .handle-dot {
        width: 8px;
        height: 8px;
        background: #666;
        border-radius: 50%;
        border: 2px solid #444;
        transition: all 0.2s;

        &:hover {
          background: #409eff;
          border-color: #666;
        }
      }
    }

    .input-handle {
      margin-right: 4px;
    }

    .output-handle {
      margin-left: 4px;
    }
  }

  .node-preview {
    margin-top: 8px;
    border-radius: 4px;
    overflow: hidden;
    
    .el-image {
      width: 100%;
      height: 120px;
      background: #333;
    }
  }
}

// 节点类型样式
.node-type-image {
  border-color: #67c23a;
  .node-header {
    background: rgba(103, 194, 58, 0.2);
  }
}

.node-type-text {
  border-color: #409eff;
  .node-header {
    background: rgba(64, 158, 255, 0.2);
  }
}

.node-type-process {
  border-color: #e6a23c;
  .node-header {
    background: rgba(230, 162, 60, 0.2);
  }
}

// 暗色主题适配
.dark {
  .workflow-node {
    background: #1a1a1a;
    border-color: #333;

    .node-header {
      background: #222;
    }

    .param-value {
      background: #333;
    }

    .handle-dot {
      background: #555;
      border-color: #333;
    }
  }
}
</style> 